import React from 'react';
import ReactDOM from 'react-dom';
import './assets/common.css';

/**
 * 目前最新的 react-router-dom 库是 v6 这个版本，我们现在更多的是使用 v5 这个版本，所以在安装的时候要加上一个版本号。
 * 如果安装的是 v6，出现如下的错误信息： Uncaught Error: You cannot render a <Router> inside another <Router>. You should never have more than one in your app
 *
 * yarn add react-router-dom@5
 *
 * react-router-dom 在实现 spa 的时候，有两种模式
 * 1. 基于 hash的实现，那么这个时候，我们使用的是  HashRouter 这个容器
 *  这个方式的 spa 应用 的url地址里面是有锚点（hash）
 * 2. 基于 h5 history api的实现，这个时候，我们要使用 BrowserRouter 这个容器
 *  这个方式的 spa 应用 的url地址里面没有锚点（hash）
 *
 * HashRouter 是一个路由容器，我们所有的路由操作必须在该容器里面进行实现
 *
 * Router 用来定义相关的路由映射
 * Route 定义每条具体的路由和组件的对应关系
 *
 * Switch 是用于做停止匹配
 *
 * Link 用于生成导航链接
 * NavLink 用于生成一个待高亮类的导航链接
 *
 */
/* es6 导出的别名设置，一般我们会给路由容器定义别名 */
import {HashRouter as Router, Switch, Route, Link, NavLink, Redirect} from 'react-router-dom';

import routes from './routes';
import CheckAuth from './components/CheckAuth';
import NotFound from './pages/NotFound';


ReactDOM.render(
    <div>
        <Router>
            <NavLink to='/news'>新闻</NavLink> <br/>
            <NavLink to='/register'>注册</NavLink> <br/>
            <NavLink to='/login'>登录</NavLink> <br/>
            <NavLink to='/collect'>我的收藏</NavLink> <br/>
            <Switch>

                <CheckAuth routes={routes}></CheckAuth>
                <Route path="/404" component={NotFound}></Route>

            </Switch>
        </Router>
    </div>,
    document.getElementById('root')
);

